<template>
    <div class="Shopconent">
        <div class="Shopconent__tab">
            <div :class="{'Shopconent__tab__title': true,'Shopconent__tab-active':acindex === index}" v-for="(item,index) in tabList" :key="index" @click="handletabClick(index,item.englishName)">{{item.name}}</div>
        </div>
        <ProductConent :shopList="shopList" :showSales="showSales" :shopName="shopName"/>
    </div>
</template>

<script>
import '../../../style/iconfont.css'
import ProductConent from './productConent/ProductConent.vue'
import { get } from '../../../utils/axiosPost'
import { reactive, toRefs, ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

// tab
const tabFn = () => {
  const tabList = [{
    name: '全部商品',
    englishName: 'all'
  }, {
    name: '秒杀',
    englishName: 'seckill'
  }, {
    name: '新鲜水果',
    englishName: 'fruit'
  }]
  const acindex = ref(0)
  const listName = ref(tabList[0].englishName)
  const handletabClick = (index, listEngName) => {
    acindex.value = index
    listName.value = listEngName
  }
  return { tabList, handletabClick, acindex, listName }
}

// tabList
const tabListFn = (currentTab, id) => {
  const shopObject = reactive({ shopList: [] })
  const getConent = async () => {
    const result = await get(`/api/shop/${id}/products`, { tab: currentTab.value })
    shopObject.shopList = result
  }
  watchEffect(() => { getConent() })
  const { shopList } = toRefs(shopObject)
  return { shopList }
}

export default {
  name: 'ShopConent',
  components: { ProductConent },
  props: ['shopName'],
  data () {
    return {
      showSales: true
    }
  },
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { tabList, handletabClick, acindex, listName } = tabFn()
    const { shopList } = tabListFn(listName, shopId)

    return { shopList, tabList, handletabClick, acindex, listName, shopId }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../style/colorValue.scss';
@import '../../../style/mixinApi.scss';
.Shopconent {
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    bottom: .5rem;
    display: flex;
    &__tab {
        width: .76rem;
        height: 100%;
        overflow-y: auto;
        background: $greyColor;
        border-radius: .02rem;
        &__title {
            height: .4rem;
            font-size: .14rem;
            color: $TextColor;
            line-height: .4rem;
            text-align: center;
        }
        &-active {
            background: $whiteColor;
        }
    }
}
</style>
